<template>
  <div class="page-reve-profile">
    <div class="search-bar">
      <el-form
        :inline="true"
        label-width="auto"
        @submit.prevent
      >
        <el-form-item :label="$t('finaManage.statisticalTime') + ':'">
          <el-select
            v-model="dateValue"
            @change="onSetDateRange(dateValue)"
          >
            <el-option
              v-for="item in dateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span
            v-if="dateValue === 1 || dateValue === 2"
            class="time-text"
          >{{ day }}</span>
          <span
            v-if="dateValue === 3 || dateValue === 4 || dateValue === 5 || dateValue === 6"
            class="time-text"
          >{{ startTime }} {{ $t('date.tip') }} {{ endTime }}</span>
          <span
            v-if="dateValue === 7"
            class="time-text"
          >
            <el-date-picker
              v-model="timeRange"
              type="daterange"
              align="center"
              unlink-panels
              range-separator="-"
              :start-placeholder="$t('date.start')"
              :end-placeholder="$t('date.end')"
              value-format="x"
              @change="onChangeDateTime"
            />
          </span>
          <span>
            <el-tooltip
              placement="top"
              effect="light"
            >
              <el-icon class="QuestionFilled"><QuestionFilled /></el-icon>
              <template #content>
                <div>
                  {{ $t('finaManage.theDataShows') }}： <br>{{ $t('finaManage.tip1') }} <br>{{
                    $t('finaManage.tip2')
                  }}
                  <br>{{ $t('finaManage.tip3') }}
                </div>
              </template>
            </el-tooltip>
          </span>
        </el-form-item>
      </el-form>
    </div>

    <div class="main-container">
      <div class="data-explan">
        <p>{{ $t('finaManage.tip4') }}：</p>
        <p class="p">
          {{ $t('finaManage.tip5') }}
        </p>
        <p class="p">
          {{ $t('finaManage.tip6') }}
        </p>
      </div>
      <div class="profile-item">
        <div class="item-title">
          <div class="line" />
          <div class="text">
            {{ $t('finaManage.incProfile') }}
          </div>
        </div>
        <div class="item-content income">
          <div
            v-for="index in 3"
            :key="index"
            class="imcome-item"
          >
            <div class="title-text">
              {{ overviewData.title[index - 1] }}
            </div>
            <div class="money-amount">
              {{ overviewData.amount[index - 1] }}{{ $t('dataAnalysis.yuan') }}
            </div>
            <div class="compare">
              <span v-if="!overviewData.ratio[index - 1]">{{ $t('order.notYet') }}</span>
              <span v-else>
                <span style="color: #777">{{ $t('finaManage.chainRatio') }}</span>
                <span :style="{ color: overviewData.ratio[index - 1] > 0 ? '#3CC480' : '#FF4141' }">
                  {{ overviewData.ratio[index - 1] + '%' }}
                  <el-icon
                    v-if="overviewData.ratio[index - 1] > 0"
                    style="font-weight: 900"
                  ><Top /></el-icon>
                  <el-icon
                    v-else
                    style="font-weight: 900"
                  ><Bottom /></el-icon>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="profile-item">
        <div class="item-title">
          <div class="line" />
          <div class="text">
            {{ $t('finaManage.reveTrend') }}
          </div>
        </div>
        <div class="item-content trend">
          <div class="charts-title">
            <div
              v-for="(item, index) in sumData"
              :key="item"
              class="charts-title-item"
            >
              <div
                :style="{ background: lineStyle[index].normal.lineStyle.color }"
                class="line"
              />
              <span>{{ item }}</span>
            </div>
          </div>
          <div class="trend-echart">
            <common-chart
              v-if="trendChart.show"
              :options="trendChart.options"
              style="width: 100%; height: 400px"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import moment from 'moment'
const dateOptions = [
  {
    label: $t('user.today'),
    value: 1
  },
  {
    label: $t('user.yesterday'),
    value: 2
  },
  {
    label: $t('user.lastSevenDay'),
    value: 3
  },
  {
    label: $t('user.lastThirtyDay'),
    value: 4
  },
  {
    label: $t('user.thisMonth'),
    value: 5
  },
  {
    label: $t('user.lastMonth'),
    value: 6
  },
  {
    label: $t('user.customRange'),
    value: 7
  }
]
const sumData = [
  $t('finaManage.actIncome'),
  $t('finaManage.incAmount'),
  $t('finaManage.amountPayout')
]

onMounted(() => {
  onGetShopList()
  onSetDateRange(3)
})

const storeValue = ref(-1) //  门店下拉的选项
watch(storeValue, () => {
  onUpdateDateTime()
  onGetRevenueData()
})

const dateValue = ref(1) //  时间栏默认选中
const dateRange = ref([]) // 展示的时间参数
let trendDataList = {
  currentDate: [],
  incomeAmount: [],
  payoutAmount: [],
  actualIncome: []
}
const overviewData = ref({
  title: [$t('finaManage.actIncome'), $t('finaManage.incAmount'), $t('finaManage.amountPayout')],
  amount: [],
  ratio: []
})
const onGetRevenueData = () => {
  // 获取营收概况页面数据
  http({
    url: http.adornUrl('/platform/financialManagement/getIncomeProfile'),
    method: 'get',
    params: http.adornParams({
      typeType: dateValue.value,
      start: dateRange.value ? dateRange.value[0] : null,
      end: dateRange.value ? dateRange.value[1] : null,
      stationId: storeValue.value
    })
  }).then(({ data }) => {
    if (data) {
      overviewData.value.amount = [data.actualIncome, data.incomeAmount, data.payoutAmount]
      overviewData.value.ratio = [
        data.actualIncomeRatio,
        data.incomeAmountRatio,
        data.payoutAmountRatio
      ]
      const list = data.trendDataList
      list.forEach(item => {
        trendDataList.currentDate?.push(item?.currentDate)
        trendDataList.incomeAmount?.push(item.incomeAmount)
        trendDataList.payoutAmount?.push(item.payoutAmount)
        trendDataList.actualIncome?.push(item.actualIncome)
      })

      onGetTrendEchart()
    }
  })
}
const onUpdateDateTime = () => {
  trendDataList = {
    currentDate: [],
    incomeAmount: [],
    payoutAmount: [],
    actualIncome: []
  }
}
// 1-7:今日、昨日、最近7天、最近30天、这个月、上个月以及自定义时间,都是2020-8-20模式
const startTime = ref('')
const endTime = ref('')
const day = ref('') //  今天，昨天选中展示
const onSetDateRange = val => {
  dateValue.value = val
  const date = new Date()
  if (val === 1) {
    // 今天
    day.value = moment(date).format('L')
    startTime.value = day.value
    endTime.value = day.value
  } else if (val === 2) {
    // 昨天
    day.value = moment(date).add(-1, 'days').format('L')
    startTime.value = day.value
    endTime.value = day.value
  } else if (val === 3) {
    // 近7天
    endTime.value = moment(date).add(-1, 'days').format('L')
    startTime.value = moment(date).add(-7, 'days').format('L')
  } else if (val === 4) {
    // 近30天
    endTime.value = moment(date).add(-1, 'days').format('L')
    startTime.value = moment(date).add(-30, 'days').format('L')
  } else if (val === 5) {
    // 这个月
    endTime.value = moment(date).format('L')
    startTime.value = moment(date).startOf('month').format('L')
  } else if (val === 6) {
    // 上个月
    const month = moment(date).add(-1, 'month').startOf('month')
    endTime.value = moment(month).endOf('month').format('L')
    startTime.value = month.format('L')
  } else if (val === 7) {
    return
  } else {
    return
  }
  const startTimeStamp = moment(startTime.value).unix() * 1000
  const endTimeStamp = moment(endTime.value).unix() * 1000
  dateRange.value = [startTimeStamp, endTimeStamp]

  onUpdateDateTime()
  onGetRevenueData()
}
// 自定义时间栏，改变时调用
const timeRange = ref([])
const onChangeDateTime = timeRange => {
  const startTimeStamp = timeRange[0]
  const endTimeStamp = timeRange[1]
  dateRange.value = [startTimeStamp, endTimeStamp]
  onUpdateDateTime()
  onGetRevenueData()
}
// 趋势图
const lineStyle = [
  {
    normal: {
      color: '#29CB97',
      lineStyle: {
        color: '#29CB97'
      }
    }
  },
  {
    normal: {
      color: '#0058FF',
      lineStyle: {
        color: '#0058FF'
      }
    }
  },
  {
    normal: {
      color: '#F56C6C',
      lineStyle: {
        color: '#F56C6C'
      }
    }
  }
]
const trendChart = reactive({
  options: {},
  show: false
})
const onGetTrendEchart = () => {
  trendChart.options = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: []
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: trendDataList.currentDate
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#E0E6F1'],
          width: 1,
          type: 'solid'
        }
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: $t('finaManage.actIncome'),
        type: 'line',
        smooth: true,
        data: trendDataList.actualIncome,
        itemStyle: lineStyle[0],
        areaStyle: {
          colorType: 'LinearGradient',
          colorOption: {
            direction: [0, 0, 0, 1],
            color: [
              { offset: 0, color: 'rgba(41, 203, 151, 0.41)' },
              { offset: 1, color: 'rgba(255, 255, 255, 0)' }
            ]
          }
        }
      },
      {
        name: $t('finaManage.incAmount'),
        type: 'line',
        data: trendDataList.incomeAmount,
        smooth: true,
        itemStyle: lineStyle[1],
        areaStyle: {
          colorType: 'LinearGradient',
          colorOption: {
            direction: [0, 0, 0, 1],
            color: [
              { offset: 0, color: 'rgba(24,144,255,0.6)' },
              { offset: 1, color: 'rgba(255, 255, 255, 0)' }
            ]
          }
        }
      },
      {
        name: $t('finaManage.amountPayout'),
        type: 'line',
        data: trendDataList.payoutAmount,
        smooth: true,
        itemStyle: lineStyle[2],
        areaStyle: {
          colorType: 'LinearGradient',
          colorOption: {
            direction: [0, 0, 0, 1],
            color: [
              { offset: 0, color: '#F56C6C' },
              { offset: 1, color: 'rgba(255, 255, 255, 0)' }
            ]
          }
        }
      }
    ]
  }
  trendChart.show = true
}
const dropDowmOptions = [
  {
    label: $t('date.a'),
    value: -1
  }
]
const onGetShopList = () => {
  // 获取营收概况页面数据
  http({
    url: http.adornUrl('/platform/financialManagement/getStation'),
    method: 'get',
    params: http.adornParams({
      shopId: 1
    })
  }).then(({ data }) => {
    if (data) {
      for (let i = 0; i < data.length; i++) {
        dropDowmOptions.push({
          label: data[i].stationName,
          value: data[i].stationId
        })
      }
      dropDowmOptions.push({
        label: $t('product.other'),
        value: -2
      })
    }
  })
}
</script>

<style lang="scss" scoped>
@use './index.scss';
</style>
